import React from 'react';

// 1. 创建复用的组件
class Mouse extends React.Component {
  // 2. 声明复用的状态
  state = {
    x: 0,
    y: 0
  }
  // 3. 定义操作状态的方法
  getPiont = (e) => {
    this.setState({
      x: e.clientX,
      y: e.clientY
    })
  }
  componentDidMount() {
    window.addEventListener('mousemove', this.getPiont)
  }
  componentWillUnmount() {
    window.removeEventListener('mousemove', this.getPiont)
  }
  render() {
    return this.props.render(this.state)
  }
}

class Handler extends React.Component {
  render() {
    return (
      // 4. 使用复用的组件(想接收mouse组件复用的状态, 需要给mouse组件定义一个值为函数的属性)
      // 5. UI解构需要使用这个函数返回
      <Mouse render={(mouse) => (
        <p>{ mouse.x } --- { mouse.y }</p>
      )}></Mouse>
    )
  }
}

export default Handler